<template>
  <div>
    <a-button type="primary" @click="save" style="margin-left: 2px">
      保存
    </a-button>
    <a-button style="margin-left: 10px">属性</a-button>

    <a-tabs type="card" style="margin-top: 15px">
      <a-tab-pane key="1" tab="数据源">
        <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
          <a-form-item label="类型">
            <a-radio-group v-model:value="setting.options.resource">
              <a-radio value="1">TSQ语句</a-radio>
              <a-radio value="2">系统数据</a-radio>
              <a-radio value="3">静态数据</a-radio>
            </a-radio-group>
          </a-form-item>
          <div v-show="setting.options.resource == '1'">
            <!-- TSQ语句 -->
            <a-form-item label="数据库">
              <a-select
                v-model:value="setting.options.dbId"
                placeholder="请选择"
              >
                <a-select-option
                  v-for="(item, index) in linkDbData"
                  :key="index"
                  :value="item.id"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="SQL">
              <a-textarea
                :rows="5"
                v-model:value="setting.options.sql"
                placeholder="请输入sql语句"
              />
            </a-form-item>
          </div>
          <!-- 系统数据 -->
          <a-form-item label="请选择" v-show="setting.options.resource == '2'">
            <a-select
              v-model:value="setting.options.region"
              placeholder="请选择方法"
            ></a-select>
          </a-form-item>
          <!-- 静态数据 -->
          <a-form-item label="数据" v-show="setting.options.resource == '3'">
            <a-textarea
              :rows="5"
              v-model:value="setting.options.stateData"
              placeholder="请输入静态数据"
            />
          </a-form-item>
          <a-form-item
            :wrapper-col="{ span: 14, offset: 4 }"
            v-show="setting.options.resource == '1'"
          >
            <a-button @click="selectSQL">查询数据</a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="2" tab="参数编辑">
        <a-row>
          <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 3 }"
              :wrapperCol="{ span: 18 }"
              label="配置"
            >
              <a-checkbox v-model:checked="setting.options.serialNumberVisible">
                是否显示序号
              </a-checkbox>
              <a-checkbox v-model:checked="setting.options.isPagination">
                是否分页
              </a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>
        <vxe-table
          style="min-height: 230px"
          stripe
          height="300"
          :data="setting.options.tableSetting"
        >
          <vxe-table-column
            type="seq"
            title="序号"
            width="60"
            align="center"
          ></vxe-table-column>
          <vxe-table-column width="150px" title="字段隐藏">
            <template v-slot="{ row }">
              <a-checkbox v-model:checked="row.isHidden">
                <span style="margin-left: 3px">{{ row.field }}</span>
              </a-checkbox>
            </template>
          </vxe-table-column>

          <vxe-table-column width="170px" title="显示名称">
            <template v-slot="{ row }">
              <a-input v-model:value="row.lable"></a-input>
            </template>
          </vxe-table-column>

          <vxe-table-column type="expand" width="80">
            <template #content="{ row }">
              <a-form :labelCol="{ span: 3 }" :wrapperCol="{ span: 14 }">
                <a-form-item label="跳转">
                  <a-checkbox v-model:checked="row.isJump">开启</a-checkbox>
                  <a-input
                    v-model:value="row.path"
                    style="width: 60%"
                    placeholder="请输入路径"
                  ></a-input>
                </a-form-item>
                <a-form-item label="参数">
                  <a-row
                    :gutter="10"
                    v-for="(item, index) in row.parmas"
                    :key="index"
                  >
                    <a-col :span="12">
                      <a-input
                        v-model:value="item.key"
                        placeholder="请输入key"
                      ></a-input>
                    </a-col>
                    <a-col :span="12">
                      <a-select
                        v-model:value="item.value"
                        placeholder="请选择参数"
                      >
                        <a-select-option
                          v-for="item in setting.options.tableSetting"
                          :key="item.field"
                          :value="item.field"
                        >
                          {{ item.field }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                  </a-row>
                  <a-button @click="addParmas(row)">新增</a-button>
                </a-form-item>
              </a-form>
            </template>
          </vxe-table-column>

          <vxe-table-column width="120px" title="对齐方式">
            <template v-slot="{ row }">
              <a-select v-model:value="row.algin" placeholder="请选择">
                <a-select-option value="left">右对齐</a-select-option>
                <a-select-option value="right">左对齐</a-select-option>
                <a-select-option value="center">居中</a-select-option>
              </a-select>
            </template>
          </vxe-table-column>

          <vxe-table-column title="宽度">
            <template v-slot="{ row }">
              <a-input-number
                style="width: 100px"
                placeholder="请输入"
                v-model:value="row.width"
              ></a-input-number>
            </template>
          </vxe-table-column>
          <vxe-table-column title="顺序">
            <template v-slot="{ row }">
              <a-input-number
                style="width: 100px"
                placeholder="请输入"
                v-model:value="row.sort"
              ></a-input-number>
            </template>
          </vxe-table-column>
        </vxe-table>
      </a-tab-pane>
      <a-tab-pane key="3" tab="预览">
        <Ftable :setting="setting"></Ftable>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import { Ftable } from '@/mycomponents/dataComponent/index'
  import { Get, Update } from '@/api/component/api'
  import { Gets } from '@/api/databaselink/api'
  import { Getsqlcolumns } from '@/api/report/api'
  export default {
    components: {
      Ftable,
    },
    props: ['selectId'],
    watch: {
      selectId(val) {
        this.getData(val)
      },
    },
    data() {
      return {
        setting: {
          options: {
            resource: '1',
          },
        },
        linkDbData: [],
      }
    },
    created() {
      Gets().then((res) => {
        if (res.isSuccess) {
          this.linkDbData = res.content.items
        }
      })
      this.getData(this.selectId)
    },

    methods: {
      addParmas(row) {
        console.log(row)
        row.parmas.push({})
      },
      getData(val) {
        Get({ id: val }).then((res) => {
          console.log(res)
          if (res.isSuccess) {
            this.formData = {
              name: res.content.name,
              componentType: res.content.componentType,
              dictId: res.content.dictId,
              note: res.content.Note,
            }
            this.setting = JSON.parse(res.content.json)
          }
        })
      },
      save() {
        var data = {
          name: this.formData.name,
          componentType: this.formData.componentType,
          dictId: this.formData.dictId,
          Json: JSON.stringify(this.setting).toString(),
          note: this.formData.note,
        }
        Update({ id: this.selectId }, data).then((res) => {
          if (res.isSuccess) {
            this.$message.success('配置保存成功！', 2.5)
          } else {
            this.$message.error(res.message)
          }
        })
      },
      selectSQL() {
        var that = this
        Getsqlcolumns({
          DbId: that.setting.options.dbId,
          Sql: that.setting.options.sql,
        }).then((res) => {
          if (res.isSuccess) {
            this.$message.success('参数返回成功，请至参数编辑进行设置')
            var tableData = []
            res.content.items.forEach((element) => {
              tableData.push({
                field: element,
                lable: element,
                parmas: [],
              })
            })
            this.setting.options.tableSetting = tableData
          } else {
            this.$message.error('sql语句语法错误' + res.message)
          }
        })
      },
    },
  }
</script>
